<template>
    <div class="sdy-banner">
        <van-swipe class="my-swipe box" :autoplay="3000" indicator-color="red">
            <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
                <img :src="item.img" alt="">
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script name="sdyBanner" lang="ts" setup>
// 发送请求, 拿到轮播图数据渲染页面
import { getBannerList } from '../../../model/goods'
import { onMounted, ref } from 'vue';
// 定义接口
// 对象的信息
interface BannerInfo {
    img?: string;
    alt?: string;
    link?: string;
    bannerid?: string;
    flag?: boolean;
}

interface Response {
    code: string,
    data: Array<BannerInfo>
}

// 准备一个变量, 保存轮播图列表
const bannerList = ref<Array<BannerInfo>>([])

// 挂载页面完毕, 发送请求, 请求轮播图列表
onMounted(async () => {
    const res = await getBannerList()
    if ((res as unknown as Response).code !== '200') return
    bannerList.value = res.data
})
</script>

<style lang="scss" scoped>
.sdy-banner {
    height: 170px;
    position: relative;
    margin-top: -5px;
    margin-bottom: 10px;

    &:before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: red;
        border-radius: 0 0 200px 200px / 0 0 30px 30px;
        transform: translateY(-50px);
        position: absolute;
        z-index: 1;
    }

    >.box {
        width: 100%;
        height: 100%;
        z-index: 2;
        position: relative;
        overflow: hidden;
        width: 350px;
        margin: 10px auto;
        border-radius: 10px;
    }
}

img {
    width: 100%;
    height: 100%;
    display: block;
}
</style>